【高德地图】点的分组聚合

2024-07-18 03:30| 来源: 网络整理| 查看: 265

有的时候我们需要在地图上渲染大量的点，为了让视觉上的效果更美观，我们需要用到点聚合，也就是地图随着缩放层级的不同，某区域的点聚合到一起，并且显示该区域点的统计数量，如下图

// 渲染点 function pointRender(context) { let isActive = false; let extData = null; let type = 0; if (context.data) { type = context.data[0].info.type; extData = context.data[0].info; isActive = mapStore.currentId === context.data[0].info.id; } const countNum = context.count > 1 ? context.count : ''; setMarkerStyle(type, countNum, isActive, context.marker, extData);// 设置点样式 } // 创建点聚合 this.markerCluster = new AMap.MarkerCluster(this.amap, pointList, { renderClusterMarker: pointRender, renderMarker: pointRender, });

但是有时我们希望可以看到不同类型点，聚合后分别的统计数据，参考网上的很多方法，基本都是在渲染点的时候监听pointRender方法返回的marker，根据marker的不同类型再做聚合效果，这样就会特别麻烦。其实我们可以先将点分好类，重写点渲染的方法，再创建多个点聚合实例去解决这个问题，方便又高效。

// 渲染点 function pointRender(context, type?: number) { let isActive = false; let extData = null; if (context.data) { type = context.data[0].info.type; extData = context.data[0].info; isActive = mapStore.currentId === context.data[0].info.id; } const countNum = context.count > 1 ? context.count : ''; setMarkerStyle(type, countNum, isActive, context.marker, extData);// 设置点样式 } // 创建点聚合1 this.markerCluster1 = new AMap.MarkerCluster(this.amap, pointList1, { renderClusterMarker: (context) => pointRender(context, pointType.type1), renderMarker: pointRender, }); // 创建点聚合2 this.markerCluster2 = new AMap.MarkerCluster(this.amap, pointList2, { renderClusterMarker: (context) => pointRender(context, pointType.type2), renderMarker: pointRender, }); ....

至此便解决点的分组聚合问题^-^

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章